<template>
	<view class="recoverDiv">
		<Navgator ></Navgator>

	
		<view class="recover">
			<h3 class="title">恢复身份</h3>
			<view class="content">你将会拥有身份下的多链钱包，比如ETH，BTC，COSMOS，EOS</view>

			<view class="zhuliInput">
				<textarea  type="text" placeholder="输入助力单词,并使用逗号分割" v-model="zhuli" maxlength="120"  @input="inputValue($event,1)"></textarea>
			</view>

			<view class="inputDiv">
				<input type="password" @focus="fous('pwd')" @blur="poinblur('pwd')" @input="inputValue($event,1)"
					v-model="pwd.value" />
				<label class="tip"
					:style="`top: ${pwd.top}rpx; font-size:${pwd.font}rpx; color:${pwd.color}`">密码</label>
				<label class="pwdType" v-if="pwd.isPwdType">{{pwd.reg}}</label>
				<label class="tip2" v-if="pwd.isTip">不少于8位字符,建议混合大小写字母数字符号</label>
			</view>

			<view class="inputDiv">
				<input type="password" @focus="fous('rePwd')" @blur="poinblur('rePwd')" v-model="rePwd.value"
					@input="inputValue" />
				<label class="tip"
					:style="`top: ${rePwd.top}rpx; font-size:${rePwd.font}rpx; color:${rePwd.color}`">重复输入密码</label>
			</view>

			
			<view class="help">
			
						<image class="helpImg" mode="widthFix"  src="/static/wenhao.png"></image>
						<view class="helpTitle">如何导入私钥/Keystore</view>
				
			</view>

			<view class="createBtn" :style="`background-color: ${btnColor};`" @click="formSubmit">恢复身份</view>

			
		</view>
	</view>
</template>

<script>
	import Toast from '../../componts/toast.vue'
	import Navgator from '../../componts/navgator.vue'
	export default {
		components: {
			Toast,
			Navgator
		},
		data() {
			return {
				zhuli: "",
				wordList: ['fort', 'command', 'stream', 'umvunga', 'attack', 'trooper', 'asking', 'drift', 'position',
					'remaiend', 'talking', 'crushed'
				],
				pwd: {
					top: 25,
					font: 30,
					color: "#505152",
					isTip: false,
					isPwdType: false,
					value: '',
					reg: '弱'
				},

				rePwd: {
					top: 25,
					font: 30,
					color: "#505152",
					value: '',

				},

				pwdTip: {
					top: 25,
					font: 30,
					color: "#505152",
					value: '',

				},

				btnColor: "#B4BCBF",
				isok: false,
				toastMsg: '',
			}
		},
		methods: {
			//输入框聚焦
			fous(par) {
				this[par].top = 2
				this[par].font = 20
				this[par].color = '#3595DA'
				if (par == "pwd") {
					this[par].isTip = true
					this[par].isPwdType = true
				}
			},
			//输入款失焦
			poinblur(par) {

				if (this[par].value !== '') {
					this[par].color = '#505152'
					if (par == "pwd") {
						this[par].isTip = false
						this[par].isPwdType = true
					}
				} else {
					this[par].top = 25
					this[par].font = 30
					this[par].color = '#505152'
					if (par == 'pwd') {
						this[par].isTip = false
						this[par].isPwdType = false
					}
				}
			},


			inputValue(e, par) {

				if (par) {
					this.regPwd(e.detail.value)
				} else {
					if (this.zhuli != '' && this.pwd.value != '' && this.rePwd.value != '') {
						this.btnColor = "#1277DF"
						this.isok = true
					} else {
						this.btnColor = "#B4BCBF"
						this.isok = false
					}
				}
			},
			regPwd(pwd) {

				if (pwd.length < 8) {
					this.pwd.reg = '弱'
				} else if (pwd.length > 8) {

					var reg = /^[0-9]{6,16}$|^[a-zA-Z]{8,16}$/; //全是数字或全是字母 6-16个字符
					var reg1 = /^[A-Za-z0-9]{8,16}$/; //数字、26个英文字母 6-16个字符
					var reg2 = /^\w{8,16}$/; // 由数字、26个英文字母或者下划线组成的字符串 6-16个字符
					if (pwd.match(reg)) {
						this.pwd.reg = '弱'
					} else if (pwd.match(reg1)) {
						this.pwd.reg = '中'
					} else if (pwd.match(reg2)) {
						this.pwd.reg = '中'
					}
				}
			},
			formSubmit(e) {
				var that = this
				console.log('提交')
				if (this.isok) {
					if (this.pwd.value.length < 8) {
						//this.$refs.toastRef.showToast("密码长度不得少于8位字符")
						this.Api.toast("密码长度不得少于8位字符")
						return
					} else if (this.pwd.value !== this.rePwd.value) {
						this.Api.toast("密码不一致")
						//this.$refs.toastRef.showToast("密码不一致")
						return
					} else {
						//验证通过 保存信息
						
						let string = this.wordList.toString()
						if(this.zhuli == string){
							this.Api.tab_to('/pages/wallet/wallet')
						}else{
							this.Api.toast('账户不正确')
						}
						

					}
				}
			},
			
			

		},

		onLoad() {

		},
		
	}
</script>

<style  scoped>
	.recover {
		display: flex;
		flex-direction: column;
		justify-content: center;

		padding: 40rpx;
		box-sizing: border-box;
	}

	.content {
		margin-top: 30rpx;
		color: #69817F;
	}

	.zhuliInput{
		width: 100%;
		position: relative;
		margin-top: 70rpx;
		height: 200rpx;
	}

	.zhuliInput textarea {
		outline: none;
		border-radius: 20rpx;
		border: none;
		width: 100%;
		height: 200rpx;
		padding: 10rpx 0;
		color: #505152;
		font-size: 30rpx;
		padding-left: 20rpx;
		background: #F9FAFC;
	}

	.inputDiv {
		width: 100%;
		position: relative;
		margin-top: 70rpx;
		height: 80rpx;


	}

	.inputDiv input {
		outline: none;
		border-radius: 20rpx;
		border: none;
		width: 100%;
		height: 80rpx;
		padding: 10rpx 0;
		color: #505152;
		font-size: 30rpx;
		padding-left: 20rpx;
		background: #F9FAFC;
	}

	.inputDiv .tip {
		position: absolute;
		left: 20rpx;
		color: #505152;

		/*这个属性的默认值是auto 默认是这个元素可以被点击
                    但是如果我们写了none  就是这个元素不能被点击，就好像它可见但是不能用  
                    可望而不可及*/
		pointer-events: none;
		/*加个过度*/
		transition: all 0.3s;
	}

	.inputDiv .pwdType {
		position: absolute;
		right: 20rpx;
		font-size: 20rpx;
		top: 30rpx;
		color: #3595DA;

	}

	.inputDiv .tip2 {
		position: absolute;
		left: 0rpx;
		bottom: -58rpx;
		font-size: 20rpx;

		color: #3595DA;

	}

	.createBtn {
		width: 90%;
		position: fixed;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30rpx;
		border-radius: 0;
	}

	
	.help{
		position: fixed;
		bottom: 150rpx;
		width: 90%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
	}
	.helpImg{
		width:33rpx ;
	}
	.helpTitle{
		color: #006DD6;
		margin-left: 10rpx;
	}
</style>
